<template>
	<!-- 升级会员 -->
	<view>
		<view class="vip">
			<navigator open-type="switchTab" url="/pages/mine/mine">
				<image src="/static/images/back_white.png"></image>
				<text>返回</text>
			</navigator>
			<view class="vip_title">vip</view>
			<view class="vip_powers">
				<view class="vip_powers_item">
					<image src="/static/images/mine/signicon.png"></image>
					<text>签到翻倍</text>
				</view>
				<view class="vip_powers_item">
					<image src="/static/images/mine/coupon.png"></image>
					<text>优惠券	</text>
				</view>
				<view class="vip_powers_item">
					<image src="/static/images/mine/recovery.png"></image>
					<text>回收卡</text>
				</view>
				<view class="vip_powers_item">
					<image src="/static/images/mine/reextraction.png"></image>
					<text>重抽卡</text>
				</view>
			</view>
			<view class="vip_desc">
				<view class="vip_desc_title">会员说明</view>
				<view class="vip_desc_content">
					<rich-text :nodes="memberdescInfo"></rich-text>
				</view>
			</view>
		</view>
		<view class="upbtn" @click="showPayframe = true" v-if="is_member != 1">¥{{memberPrice}}    升级vip</view>
		<!-- 支付框 -->
		<u-popup v-model="showPayframe" mode="bottom" border-radius="36">
			<view class="payframe">
				<view class="payframe_title">升级会员</view>
				<view class="paymoney">
					<view class="paymoney_title">升级会员需要支付</view>
					<view class="paymoney_money">￥{{memberPrice}}</view>
				</view>
				<view class="paytype">
					<view class="paytype_title">请选择支付方式</view>
					<view class="paytype_item" @click="payActive = 0">
						<image src="/static/images/mall/paychecked.png" v-if="payActive === 0" class="paytype_item_check"></image>
						<image src="/static/images/mall/check.png" v-else class="paytype_item_check"></image>
						<image src="/static/images/mall/alipay.png" class="paytype_item_icon"></image>
						<text>支付宝支付</text>
					</view>
					<view class="paytype_item" @click="payActive = 1">
						<image src="/static/images/mall/paychecked.png" v-if="payActive === 1" class="paytype_item_check"></image>
						<image src="/static/images/mall/check.png" v-else class="paytype_item_check"></image>
						<image src="/static/images/mall/wechat.png" class="paytype_item_icon"></image>
						<text>微信支付</text>
					</view>
				</view>
				<view class="paytype_btn" @click="confirmPay">确定支付</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				memberPrice:'0',//升级会员所需费用
				memberdescInfo:'会员说明',//会员说明
				showPayframe:false,//显示支付框
				payActive:0,//当前选中的支付方式 0支付宝 1微信
				allowTap:true,//防误触
				is_member:''
			}
		},
		onLoad() {
			this.getBecomemembera();
			this.getMyindex();
		},
		methods: {
			//获取会员权益
			getBecomemembera(){
				this.$api.becomemembera().then(res=>{
					this.memberPrice = res.update_member;
					this.memberdescInfo = res.member_introduce;
				})
			},
			//获取我的信息
			getMyindex(){
				this.$api.myindex().then(res=>{
					this.is_member = res.user.is_member;
				})
			},
			//确定支付
			confirmPay(){
				if(!this.allowTap) return
				this.allowTap = false;
				setTimeout(()=>{
					this.allowTap = true;
				},3000)
				this.$api.becomememberb({
					pay_type:this.payActive+1,
					price:this.memberPrice
				}).then(res=>{
					this.goPay(this.payActive+1,res);
				})
			},
			//去支付
			goPay(pay_type,payInfo){
				uni.showLoading({
					title:'支付中...'
				})
				if(pay_type==2){
					uni.getProvider({
						service: 'payment',
						success: (res) => {
							if (res.provider.indexOf('wxpay') != -1) {
								uni.requestPayment({
									provider: "wxpay", 
									orderInfo: payInfo,
									success: (res) => {
										console.log('success:' + JSON.stringify(res));
										uni.hideLoading();
										uni.showToast({
											title:'支付成功',
											icon:'success'
										})
										setTimeout(()=>{
											uni.switchTab({
												url:'/pages/mine/mine'
											})
										},1500)
									},
									fail: (err) => {
										console.log('fail:' + JSON.stringify(err));
										uni.hideLoading();
										uni.showToast({
											title:'支付失败，请重试',
											icon:'none'
										})
									}
								})
							}
						}
					})
				}else{
					uni.getProvider({
						service: 'payment',
						success: (res) => {
							if (res.provider.indexOf('alipay') != -1) {
								uni.requestPayment({
									"provider": "alipay", 
									"orderInfo": payInfo,
									success: (res) => {
										console.log('success:' + JSON.stringify(res));
										uni.hideLoading();
										uni.showToast({
											title:'支付成功',
											icon:'success'
										})
										setTimeout(()=>{
											uni.switchTab({
												url:'/pages/mine/mine'
											})
										},1500)
									},
									fail: (err) => {
										console.log('fail:' + JSON.stringify(err));
										uni.hideLoading();
										uni.showToast({
											title:'支付失败，请重试',
											icon:'none'
										})
									}
								})
							}
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">
page{
	background-image: url();
	background-size: cover;
}
.vip{
	width: 750rpx;
	position: relative;
	
	navigator{
		@include center;
		position: absolute;
		top:  calc(var(--status-bar-height) + 30rpx);
		left: 30rpx;
		z-index: 999;
		
		image {
			width: 22rpx;
			height: 40rpx;
		}
		text {
			font-size: 36rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FFFFFF;
			margin-left: 16rpx;
		}
	}
	image{
		@include img;
	}
	
	&_title{
		font-size: 150rpx;
		font-family: FZLanTingHeiS-H-GB;
		font-weight: bold;
		color: #FFFFFF;
		-webkit-text-stroke: 6rpx #FFB501;
		text-stroke: 6rpx #FFB501;
		position: absolute;
		top: 138rpx;
		left: 275rpx;
	}
	&_powers{
		width: 664rpx;
		height: 140rpx;
		background: #FFB550;
		border-radius: 70rpx;
		@include around;
		position: absolute;
		top: 457rpx;
		left: 43rpx;
		
		&_item{
			@include column-center;
			
			image{
				width: 60rpx;
				height: 50rpx;
			}
			text{
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FFFFFF;
				margin-top: 20rpx;
			}
		}
	}
	&_desc{
		width: 690rpx;
		position: absolute;
		top: 690rpx;
		left: 30rpx;
		
		&_title{
			font-size: 32rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #FFFFFF;
		}
		&_content{
			margin-top: 40rpx;
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #FFFFFF;
			padding-bottom: 100rpx;
		}
	}
}
.upbtn{
	width: 634rpx;
	height: 70rpx;
	background: linear-gradient(180deg, #FF1501 0%, #FF9126 100%);
	border-radius: 35rpx;
	font-size: 24rpx;
	font-family: Source Han Sans CN;
	font-weight: 400;
	color: #FFFFFF;
	@include center;
	position: fixed;
	bottom: 30rpx;
	left: 58rpx;
}
.payframe{
	padding: 0 30rpx 30rpx;
	box-sizing: border-box;
	
	&_title{
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #333333;
		margin: 48rpx auto;
		text-align: center;
	}
	.paymoney{
		@include between;
		
		&_title{
			font-size: 28rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #333333;
		}
		&_money{
			font-size: 32rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #FF0000;
		}
	}
	.paytype{
		margin: 50rpx 0;
		
		&_title{
			font-size: 32rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #333333;
		}
		&_item{
			@include align-center;
			margin-top: 30rpx;
			
			&_check{
				width: 30rpx;
				height: 30rpx;
			}
			&_icon{
				width: 40rpx;
				height: 40rpx;
				margin: 0 20rpx;
			}
			text{
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
			}
		}
		&_btn{
			width: 560rpx;
			height: 70rpx;
			background: linear-gradient(180deg, #FF8583 0%, #FF660A 100%);
			border-radius: 35rpx;
			@include center
			font-size: 30rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FFFFFF;
			margin: 0 auto;
		}
	}
	.paybtn{
		width: 560rpx;
		height: 70rpx;
		background: linear-gradient(#ff1401,#ff9224);
		border-radius: 36rpx;
		padding: 20rpx 0;
		box-sizing: border-box;
		margin: 70rpx auto 0;
		@include center;
		
		text{
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FFFFFF;
		}
	}
	.payagree{
		@include center;
		margin-top: 30rpx;
		
		&_icon{
			@include center;
			
			image{
				width: 30rpx;
				height: 30rpx;
			}
		}
		&_text{
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #333333;
			margin-left: 16rpx;
			
			text{
				color: #FF0000;
			}
		}
	}
}
</style>
